<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>今日诗词</title>
		<style>
			*{
				padding:0;margin:0;list-style: none;text-decoration: none;
				color:white
			}
			a {color:white}
			
			html,body{width:100%;height: 100%;}
			
			.content {
				
				text-align: center;
				margin:0 auto 20px;
			}
			.henshin {
				font-size: 16px;color:deepskyblue;skybackground-color: white;
				width:140px;
				height:46px;line-height: 46px;
				border-radius: 8px;
				border:none;
				box-sizing: border-box;
				position:relative;
				transform: translate(-50%,-50%);
				left:50%;
				margin: 30px auto;
				outline: none;
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
				transition:0.3s;
			}
			.henshin:hover{
				height:56px;line-height: 56px;
				width:160px;
			}
			.main{
				width:100%;height:800px;
				background-image: linear-gradient(#e66465, #9198e5);
				padding-top: 100px;
				/* filter: blur(30px); */
			}
			
			
			
			
			@media screen and (min-width:770px) {
				.header {
					background: url(image/44036.jfif) no-repeat;
					background-size: 100% 100%;
					width:100%;height:100%;
					
					box-sizing: border-box;
					padding-top: 180px;
				}
				.nav {
					width:100%;height:40px;padding:8px;
				}
				.nav ul .ii {display:none;}
				.nav ul {
					margin:0 auto 80px;
					width:770px;
					position:relative;z-index: 33;color:white;
					display:flex;justify-content: center;
					
				}
				.nav ul li {
					flex:1;height:30px;line-height: 30px;
					width:60px;box-sizing: border-box;
					margin:0 10px 10px 0;
					text-align: center;
				}
				.nav ul li:hover {
					background-color: white;
					border-radius: 12px;
				}
				.nav ul li a:hover {
					color:skyblue
				}
				.nav ul .current {
					border: 1px solid white;
					border-radius: 12px;
					background-color: white;
				}
					.nav ul .current a {
						color:deepskyblue;
					}			
				
			}
			
			
			@media screen and (max-width:770px) {
				.header {
					background: url(image/44036.jfif) no-repeat;
					background-position:top left;
					background-size: 140% 140%;
					/* background-size: 100% 100%; */
					width:100%;height:100%;
					padding-top:180px;
					box-sizing: border-box;
				}
				/* .nav ul {display:flex;} */
				.ii {width:30px;height:30px;display: inline;position:relative;top:5px;
				
				}
				.nav {
					width:100%;background-color: deepskyblue;height:40px;margin-bottom: 80px;
					line-height: 40px;
				}
				.nav ul li {display:none;}
				.nav ul .current {
					display:inline;height:40px;margin:0 auto;width:100px;
				}
				.nav_active {
					position:relative;z-index: 99;
					width:100%;background-color: royalblue;height:200px;
					line-height: 40px;
					overflow: hidden;
				}
				
			}
			/* 
			此时的效果为点击标签会跳转也页面;
			在不使用框架,又不让地址发生跳转;并且页面部分内容发生改变,利用选项卡的操作 
			*/
		</style>
	</head>
	<body>
		<div class="header">
			<nav class="nav" style="transition:1s;position: fixed;top:0;">
			    <ul class="list"> 
					<img src="./image/nav.png" alt="dao" class="ii">
			        <li class="current"><a href="#">每日诗词</a></li>
			        <li><a href="./pages/heisei.html">百人一首</a></li>
			        <li><a href="./pages/du.html">毒鸡汤</a></li>
			        <li><a href="./pages/article.html">每日一篇</a></li>
			        <!-- <li><a href="javascript:;">Graphic Desig</a></li> -->
			    </ul>
			</nav>
			<div class="content">
				<!-- <h2 style="margin-bottom: 20px;">Do Your Best</h2> -->
				<h3 class="poem" style="box-shadow:1px;color:deepskyblue;"></h4>
				<h4 class="poem" style="margin:20px auto 20px;box-shadow:1px;color:deepskyblue;"></h3>
				<h4 class="poem" style="box-shadow:1px;color:deepskyblue;"></h3>
			</div>
			<button class="henshin">换一句</button>
		</div>
		
	<script type="text/javascript">	
		let ii =document.getElementsByClassName('ii');
		let list =document.getElementsByTagName("li");
		let nav =document.getElementsByTagName('nav');
		let flag =false;
		
		ii[0].addEventListener('click',function(){
			if(flag) {
				for(let i=0;i<list.length;i++){
					if(list[i].className =="current") {
						list[i].style.display ="inline"
						continue;
					}
					list[i].style.display="none";
				}
				nav[0].className="nav";
				
				flag=false;
				return;
			}
			nav[0].className="nav_active";
			setTimeout(function(){
				for(let i=0;i<list.length;i++){
					// list[i].className="";
					list[i].style.display="block";
				}
			},100)
			flag =true;
		})
		
		
		var henshin =document.getElementsByClassName('henshin');
		var poem =document.getElementsByClassName('poem')
		var info =[
				{
					content:"渐滴作秋声，被风惊碎。",origin:{title:"疏帘淡月·寓桂枝香秋思",author:"张籍"}
				},
				{
					content:"滩声秋更急，峡气晓多阴。",origin:{title:"阴雨",author:"白居易"}
				},
				{
					content:"清晨入古寺，初日照高林。",origin:{title:"题破山寺后禅院",author:"常建"}
				},
				{
					content:"闲云潭影日悠悠，物换星移几度秋。",origin:{title:"滕王阁诗",author:"王勃"}
				},
				{
					content:"纸屏石枕竹方床，手倦抛书午梦长。",origin:{title:"夏日登车盖亭",author:"蔡确"}
				},
				{
					content:"指点牡丹初绽朵，日高犹自凭朱栏，含嚬不语恨春残。",origin:{title:"浣溪沙·清晓妆成寒食天",author:"韦庄"}
				},
				{
					content:"镜水夜来秋月，如雪",origin:{title:"荷叶杯·镜水夜来秋月",author:"温庭筠"}
				},
				{
					content:"络纬秋啼金井阑，微霜凄凄簟色寒。",origin:{title:"长相思·其一",author:"李白"}
				},
				{
					content:"空山新雨后，天气晚来秋。",origin:{title:"山居秋暝",author:"王维"}
				},
				{
					content:"扁舟昨泊，危亭孤啸，目断闲云千里。",origin:{title:"鹊桥仙·扁舟昨泊",author:"吴潜"}
				},
				{
					content:"西风酒旗市，细雨菊花天。",origin:{title:"秋怀",author:"欧阳修"}
				},
				{
					content:"春云不变阳关雪，桑叶先知胡地秋。",origin:{title:"从军行",author:"李昂"}
				},
				{
					content:"伫听寒声，云深无雁影。",origin:{title:"关河令·秋阴时晴渐向暝",author:"周邦彦"}
				},
				{
					content:"红影湿幽窗，瘦尽春光。",origin:{title:"浪淘沙·红影湿幽窗",author:"纳兰性德"}
				},
				{
					content:"远村秋色如画，红树间疏黄。",origin:{title:"诉衷情·芙蓉金菊斗馨香",author:"晏殊"}
				},
				{
					content:"待到秋来九月八，我花开后百花杀。",origin:{title:"不第后赋菊",author:"黄巢"}
				},
				{
					content:"菡萏香销翠叶残，西风愁起绿波间。",origin:{title:"摊破浣溪沙·菡萏香销翠叶残",author:"李璟"}
				},
				{
					content:"水流花谢两无情，送尽东风过楚城。",origin:{title:"春夕",author:"崔涂"}
				},
				{
					content:"东风动百物，草木尽欲言。",origin:{title:"长歌行",author:"李白"}
				},
				{
					content:"我也不登天子船，我也不上长安眠。",origin:{title:"把酒对月歌",author:"唐寅"}
				},
				{
					content:"才卷朱帘却又、晚风寒。",origin:{title:"虞美人·梳楼",author:"蒋捷"}
				},
				{
					content:"旧山山下还如此，回首东风一断肠。",origin:{title:"桃花",author:"罗隐"}
				},
				{
					content:"吊影分为千里雁，辞根散作九秋蓬。",origin:{title:"望月有感",author:"白居易"}
				},
				{
					content:"已是黄昏独自愁，更著风和雨。",origin:{title:"卜算子·咏梅",author:"陆游"}
				},
				{
					content:"望阙云遮眼，思乡雨滴心。",origin:{title:"阴雨",author:"白居易"}
				},
				{
					content:"阴风西北来，惨澹随回鹘。",origin:{title:"北征",author:"杜甫"}
				},
				{
					content:"过隆中、桑柘倚斜阳，禾黍战悲风。。",origin:{title:"八声甘州·读诸葛武侯传",author:"王质"}
				},
				{
					content:"诗酒琴棋客，风花雪月天。",origin:{title:"神童诗",author:"汪洙"}
				},
				{
					content:"乱条犹未变初黄，倚得东风势便狂。",origin:{title:"咏柳",author:"曾巩"}
				},
				{
					content:"庭前八月梨枣熟，一日上树能千回。",origin:{title:"百忧集行",author:"杜甫"}
				}];
				function aj(result)	{
							let aa = result.sort(function(){
								let bb =Math.random()
								return bb- 0.5;
							})
							shi =aa[0];
							let detail =shi.origin
							let content =shi.content;
							let title =detail.title;
							let author =detail.author;
							poem[0].innerText =content;
							poem[1].innerText =author;
							poem[2].innerText ="《" + title + "》";
				}			
				aj(info)			
		henshin[0].onclick =function () {
			  //   ajax({
					// 	url:"http://106.55.172.147:3000/poemcn/show" ,
					// 	header:{'Conten-Type':'application/json'},
					// 	success:function(result) {
					// 		result =JSON.parse(result);
					// 		let shi =result.data;
					// 		let detail =shi.origin
					// 		let content =shi.content;
					// 		let title =detail.title;
					// 		let author =detail.author;
					// 		poem[0].innerText =content;
					// 		poem[1].innerText =author;
					// 		poem[2].innerText ="《" + title + "》";
					// 		// console.log(result)
					// 	}
					// })
					aj(info);
		}
	</script>
	</body>
</html>


